<template>
  <div class="container">
    <div class="header">
      <div class="left">
        <div class="logobox">
          <img
            @click="$router.push('/')"
            class="logo"
            src="@/assets/logo.svg"
          />
        </div>
        <div class="menuBox">
          <div class="borderline" style="margin-right: 10px"></div>
          <div v-for="menu in mainMenu.menuTree" :key="menu.id" v-if="isquick">
            <el-popover
              placement="bottom-start"
              :width="480"
              trigger="hover"
              popper-class="menuTreePopper"
              :disabled="menu.name == '工作中心' ? true : false"
              :offset="0"
              v-model:visible="menu.visible"
            >
              <template #reference>
                <div
                  class="menuTreeItem"
                  :class="
                    currentGroupName == menu.meta.title
                      ? 'menuTreeItemActive'
                      : ''
                  "
                  @click="workClick(menu)"
                >
                  {{ menu.name }}
                </div>
              </template>
              <template #default>
                <ul class="menuChildrenContainer">
                  <li
                    class="menuChildrenColumn"
                    v-for="item in menu.children"
                    :key="item.id"
                  >
                    <div class="menuGroupTitle">{{ item.name }}</div>
                    <div class="menuGroupBox">
                      <div
                        v-if="item.children.length == 0"
                        class="menuGroupItem"
                        @click="clickMenuItem(item, item)"
                      >
                        <span>{{ item.meta.title }}</span>
                        <img
                          v-if="iscollect(item.id)"
                          @click.stop="quickclick(item.id)"
                          src="@/assets/menucollect.svg"
                        />
                        <img
                          v-else
                          @click.stop="quickclick(item.id)"
                          src="@/assets/menunocollect.svg"
                        />
                      </div>
                      <div
                        v-else
                        v-for="items in item.children"
                        :key="items.id"
                        class="menuGroupItem"
                        @click="clickMenuItem(item, items)"
                      >
                        <span>{{ items.meta.title }}</span>
                        <img
                          v-if="iscollect(items.id)"
                          @click.stop="quickclick(items.id)"
                          src="@/assets/menucollect.svg"
                        />
                        <img
                          v-else
                          @click.stop="quickclick(items.id)"
                          src="@/assets/menunocollect.svg"
                        />
                      </div>
                    </div>
                  </li>
                </ul>
              </template>
            </el-popover>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="menu_item">
          <el-popover
            placement="bottom"
            :width="380"
            trigger="hover"
            popper-class="menuTreePopper"
            :offset="0"
            v-model:visible="jyvisible"
          >
            <template #reference>
              <div class="menuTreeItem">集运互联</div>
            </template>
            <template #default>
              <div class="quicktitle">集运互联</div>
              <div class="quickBox">
                <div @click="openjst('yj')" class="quickItem">
                  <span>运价查询</span>
                </div>
                <div @click="openjst('hw')" class="quickItem">
                  <span>货物跟踪</span>
                </div>
              </div>
            </template>
          </el-popover>
        </div>
        <div class="menu_item menu_aliem">
          <div class="borderline"></div>
        </div>
        <div class="menu_item">
          <el-popover
            placement="bottom"
            :width="380"
            trigger="hover"
            popper-class="menuTreePopper"
            :offset="0"
            v-model:visible="quickvisible"
          >
            <template #reference>
              <div class="menuTreeItem">快捷</div>
            </template>
            <template #default>
              <div class="quicktitle">快捷入口</div>
              <div class="quickBox">
                <div
                  @click="quickgo(item)"
                  class="quickItem"
                  v-for="item in QuickList"
                  :key="item.id"
                >
                  {{ item.parentMenu.title + "/" + item.menuName }}
                  <el-icon @click.stop="delQuick(item.menuId)"
                    ><Delete
                  /></el-icon>
                </div>
                <div v-if="QuickList.length == 0" class="noquick">
                  <el-empty description="暂无快捷页面" />
                </div>
              </div>
            </template>
          </el-popover>
        </div>
        <div class="menu_item">
          <MessageIcon></MessageIcon>
        </div>
        <div class="menu_item">
          <img
            @click="openTheme"
            class="themeicon"
            src="@/assets/images/theme.svg"
          />
        </div>
        <div style="margin-top: -2px" class="menu_item" @click="screenClick">
          <el-icon
            style="vertical-align: middle; font-style: normal"
            :size="18"
          >
            <FullScreen />
          </el-icon>
        </div>
        <div class="menu_item menu_aliem">
          <div class="borderline"></div>
        </div>
        <div class="menu_item menu_aliem">
          <el-popover
            placement="bottom-end"
            :width="320"
            trigger="hover"
            popper-class="menuTreePopper"
            :offset="0"
            v-model:visible="Avatarvisible"
          >
            <template #reference>
              <div class="accountBox">
                <div class="accountMess">
                  <div class="accountname">{{ currentAccount }}</div>
                  <div class="accountsubname">{{ currentName }}</div>
                </div>
                <el-avatar :size="28" :src="currentAvatar" />
              </div>
            </template>
            <template #default>
              <div class="AvatarBox">
                <div class="AvatarBoxTop">
                  <div class="account">{{ currentAccount }}</div>
                  <div class="nickname">
                    <span class="nicklabel">账号昵称</span>
                    <span class="nickvalue">{{ currentName }}</span>
                  </div>
                  <div class="AvatarBtn">主账号</div>
                </div>
                <div class="AvatarMiddle">
                  <div @click="gosetting" class="AvatarMiddleItem">
                    个人设置
                  </div>
                  <div @click="gosetting" class="AvatarMiddleItem">
                    安全设置
                  </div>
                </div>
                <div class="AvatarBottom">
                  <div @click="empMenu.logout()" class="quitbtn">退出登录</div>
                </div>
              </div>
            </template>
          </el-popover>
          <!-- <el-dropdown
            trigger="hover"
            @command="empMenu.dropDownCommand"
            class
            size="middle"
            append-to-body
          >
            <div class="accountBox">
              <div class="accountMess">
                <div class="accountname">{{ currentAccount }}</div>
                <div class="accountsubname">{{ currentName }}</div>
              </div>
              <el-avatar :size="28" :src="currentAvatar" />
            </div>
            <template #dropdown>
              <el-dropdown-menu class="menu_dropdown">
                <el-dropdown-item icon="el-icon-user" command="userinfo"
                  >个人设置</el-dropdown-item
                >
                <el-dropdown-item
                  divided
                  icon="el-icon-close"
                  command="outLogin"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown> -->
        </div>
      </div>
    </div>
    <div class="main-content">
      <div
        class="sidebarMail"
        :class="layout.isCollapse ? 'sidebarCollapse' : ''"
        v-if="!isWorkBench"
      >
        <div class="sidebar__collapse" @click="slidetoggle">
          <span class="menuTitle" v-if="!layout.isCollapse">{{
            mainMenu.childrenMenu?.name
          }}</span>
          <el-icon
            class="icon"
            v-if="layout.isCollapse"
            :size="20"
            color="#7F7F7F"
          >
            <Expand />
          </el-icon>
          <el-icon v-else :size="20" color="#7F7F7F">
            <Fold />
          </el-icon>
        </div>
        <el-menu
          :default-active="mainMenu.currentActive"
          class="el-menu-vertical-demo"
          :collapse="layout.isCollapse"
          size=""
          style="
            max-height: calc(100% - 40px);
            overflow-y: auto;
            overflow-x: hidden;
          "
        >
          <!-- <MenuItemTree
            v-for="menu in mainMenu.childrenMenu?.children"
            :key="menu.id"
            :menu="menu"
            :choose="tab.clickMenuItem"
          ></MenuItemTree> -->
          <template v-if="mainMenu.childrenMenu?.children.length == 0">
            <el-menu-item
              :index="mainMenu.childrenMenu?.path"
              @click="tab.clickMenuItem(mainMenu.childrenMenu)"
            >
              <component
                v-if="layout.isCollapse"
                :is="mainMenu.childrenMenu?.meta.icon"
                style="width: 20px; height: 20px"
              ></component>
              <template #title
                ><span style="margin-left: 8px">{{
                  mainMenu.childrenMenu?.meta.title
                }}</span></template
              >
            </el-menu-item>
          </template>

          <el-menu-item
            v-for="menu in mainMenu.childrenMenu?.children"
            :key="menu.id"
            :index="menu.path"
            @click="tab.clickMenuItem(menu)"
          >
            <component
              v-if="layout.isCollapse"
              :is="menu.meta.icon"
              style="width: 20px; height: 20px"
            ></component>
            <template #title
              ><span style="margin-left: 8px">{{
                menu.meta.title
              }}</span></template
            >
          </el-menu-item>
        </el-menu>
      </div>
      <div class="router-view">
        <!-- tab栏 start -->
        <div class="tab-bar">
          <el-tabs
            v-model="tab.activeTab"
            type="card"
            class="outer-tab"
            @tab-remove="tab.removeTab"
            @tab-click="tab.tabClick"
          >
            <el-tab-pane
              v-for="(tabItem, idx) in tab.tabs"
              :label="tabItem.title"
              :name="tabItem.route"
              :key="tabItem.route"
            >
              <template #label>
                <el-dropdown trigger="contextmenu">
                  <div :idx="idx" class="tab-dragable-item">
                    {{ tabItem.title }}
                    <el-icon @click.stop="tab.removeTab(tabItem.route!, true)">
                      <Close />
                    </el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="tab.removeTab(tabItem.route!)"
                        >关闭</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click="tab.closeOtherTabs(tabItem.route!)"
                        >关闭其他菜单</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click="tab.closeRightTabs(tabItem.route!)"
                        >关闭右侧菜单</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>

        <div v-loading="!layout.isLoadOver" class="router-view-content">
          <template v-if="layout.isLoadOver">
            <router-view v-slot="{ Component, route }">
              <!-- <keep-alive :ref="(v) => (tab.keepAliveNode = v)">
                <component :key="route.fullPath" :is="Component" />
              </keep-alive> -->
              <component :key="route.fullPath" :is="Component" />
            </router-view>
          </template>
        </div>
      </div>
    </div>

    <el-drawer
      v-model="drawer"
      title="自定义主题"
      direction="rtl"
      :before-close="handleClose"
      class="themeClass"
    >
      <div class="themebox">
        <el-row>
          <el-col :span="6" class="themeItemMain">
            <div
              class="themeItem"
              :class="themeType == 1 ? 'themeItemActive' : ''"
              @click="setThemeColor('#409eff', 1)"
            >
              <div class="themeTop" style="background: #409eff"></div>
              <div class="themeBottom">
                <div class="themeBottomL"></div>
                <div class="themeBottomR"></div>
              </div>
              <div class="menban">
                <el-icon color="#79B43C" size="24"
                  ><CircleCheckFilled
                /></el-icon>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="themeItemMain">
            <div
              class="themeItem"
              :class="themeType == 2 ? 'themeItemActive' : ''"
              @click="setThemeColor('#79B43C', 2)"
            >
              <div class="themeTop" style="background: #79b43c"></div>
              <div class="themeBottom">
                <div class="themeBottomL"></div>
                <div class="themeBottomR"></div>
              </div>
              <div class="menban">
                <el-icon color="#79B43C" size="24"
                  ><CircleCheckFilled
                /></el-icon>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="themeItemMain">
            <div
              class="themeItem"
              :class="themeType == 3 ? 'themeItemActive' : ''"
              @click="setThemeColor('#B4843C', 3)"
            >
              <div class="themeTop" style="background: #b4843c"></div>
              <div class="themeBottom">
                <div class="themeBottomL"></div>
                <div class="themeBottomR"></div>
              </div>
              <div class="menban">
                <el-icon color="#79B43C" size="24"
                  ><CircleCheckFilled
                /></el-icon>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="themeItemMain">
            <div
              class="themeItem"
              :class="themeType == 4 ? 'themeItemActive' : ''"
              @click="setThemeColor('#3C97B4', 4)"
            >
              <div class="themeTop" style="background: #3c97b4"></div>
              <div class="themeBottom">
                <div class="themeBottomL"></div>
                <div class="themeBottomR"></div>
              </div>
              <div class="menban">
                <el-icon color="#79B43C" size="24"
                  ><CircleCheckFilled
                /></el-icon>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="themeItemMain">
            <div
              class="themeItem"
              :class="themeType == 5 ? 'themeItemActive' : ''"
              @click="setThemeColor('#B43C6E', 5)"
            >
              <div class="themeTop" style="background: #b43c6e"></div>
              <div class="themeBottom">
                <div class="themeBottomL"></div>
                <div class="themeBottomR"></div>
              </div>
              <div class="menban">
                <el-icon color="#79B43C" size="24"
                  ><CircleCheckFilled
                /></el-icon>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="themeItemMain">
            <div
              class="themeItem"
              :class="themeType == 6 ? 'themeItemActive' : ''"
              @click="setThemeColor('#B43C3C', 6)"
            >
              <div class="themeTop" style="background: #b43c3c"></div>
              <div class="themeBottom">
                <div class="themeBottomL"></div>
                <div class="themeBottomR"></div>
              </div>
              <div class="menban">
                <el-icon color="#79B43C" size="24"
                  ><CircleCheckFilled
                /></el-icon>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import MessageIcon from "@/components/message/MessageIcon.vue";
import * as ElementPlusIconsVue from "@element-plus/icons";

import screenfull from "screenfull";
import useTabRef from "@/composables/useTab";
import mainMenuRef from "@/composables/useMainMenu";
import employeeRef from "@/composables/useEmployee";
import { useBreadcrumb } from "@/composables/useBreadcrumb";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { reactive, computed, ref, onMounted, watch } from "vue";
import MenuItemTree from "@/components/MenuItemTree";
import { LAYOUTS } from "@/store/modules/layout";
import "v-contextmenu/dist/themes/default.css";
import request from "@/public/request";
import type { MenuButton, MenuTree } from "@/types/menu";

const useLayout = () => {
  // 是否加载完毕
  const isLoadOver = ref(false);
  const isCollapse = ref(false);
  const store = useStore();
  onMounted(async () => {
    store.commit("layout/setCurrentLayout", LAYOUTS.INTERNAL);
    await store.dispatch("auth/getCurrentLoggedInfo").finally(() => {
      isLoadOver.value = true;
    });

    isLoadOver.value = true;
  });
  return reactive({
    isLoadOver,
    isCollapse,
  });
};
// 主题抽屉
const drawer = ref(false);
const openTheme = () => {
  drawer.value = true;
};
const handleClose = () => {
  drawer.value = false;
};

// const businessBaseData = () => {
//   const store = useStore()

//   onMounted(async () => {})
// }

const breadcrumb = useBreadcrumb();
const store = useStore();
const router = useRouter();
const route = useRoute();
// tab页相关
const tab = useTabRef(store, router);

// 菜单相关
const mainMenu = mainMenuRef(router, tab.gotoRoute);
const mainVisible = ref([]);
const ChildrenMenu = mainMenu.menuTree;
// 员工相关 (右上角)
const empMenu = employeeRef(store, router);
// layout 相关
const layout = useLayout();

// 当前用户是否登录
const currentUserIsLogin = computed(() => {
  if (store.state.auth.user != null) {
    return true;
  }
  return false;
});

// 当前登录公司名称
const currentCompanyName = computed(() => {
  if (currentUserIsLogin && store.state.auth.employee) {
    return store.state.auth.employee.CompanyName;
  }
  return "";
});
// 当前登录用户的头像
const currentAvatar = computed(() => {
  if (currentUserIsLogin && store.state.auth.user) {
    return store.state.auth.user.avatarPath;
  }
  return "";
});
// 当前登录用户的账号
const currentAccount = computed(() => {
  if (currentUserIsLogin && store.state.auth.user) {
    return store.state.auth.user.username;
  }
  return "";
});
// 当前登录用户昵称
const currentName = computed(() => {
  if (currentUserIsLogin && store.state.auth.user) {
    return store.state.auth.user.nickName;
  }
  return "";
});

// 是否是工作台
const isWorkBench = computed(() => {
  if (route.meta.title == "工作中心") {
    return true;
  }
  return false;
});
// 菜单开合按钮
const screenClick = () => {
  screenfull.toggle();
};
// 一级菜单开合按钮
const slidetoggle = () => {
  layout.isCollapse = !layout.isCollapse;
};
// 打开子菜单第一项页面
const openfirstpage = (menu: any) => {
  if (menu.Children.length != 0) {
    openfirstpage(menu.Children[0]);
  } else {
    mainMenu.openMenu(menu);
  }
};

const clickMenuItem = (menu: any, item: any) => {
  mainMenu.openMenu(menu);
  tab.clickMenuItem(item);
  menu.visible = false;
};

const menuName = computed(() => {
  return mainMenu.childrenMenu?.title;
});

const workClick = (menu: any) => {
  if (menu.name == "工作中心") {
    tab.clickMenuItem(menu);
  }
};

const quickvisible = ref(false);
const jyvisible = ref(false);

const openjst = (val) => {
  if (val == "yj") {
    window.open("https://dms.justom.cn/#/customer/freightCenter");
  }
  if (val == "hw") {
    window.open("https://dms.justom.cn/#/customer/cargoCenter");
  }
};

// 获取快捷页面列表
const QuickList = ref([]);
const getQuickList = async () => {
  let res = await request.get("/api/favoritemenu/query");
  QuickList.value = res;
};
// 添加快捷页面
const addQuick = async (id: any) => {
  let res = await request.post("/api/favoritemenu/create", {
    menuId: id,
  });
  await getQuickList();
};
// 删除快捷页面
const delQuick = async (id: any) => {
  let res = await request.post("/api/favoritemenu/delete", {
    idArray: [id],
  });
  await getQuickList();
};
// 是否在快捷页面
const iscollect = (id: any) => {
  let arr = QuickList.value.map((item: any) => {
    return item.menuId;
  });
  if (arr.indexOf(id) !== -1) {
    return true;
  } else {
    return false;
  }
};
const quickclick = (id: any) => {
  if (iscollect(id)) {
    delQuick(id);
  } else {
    addQuick(id);
  }
};
const quickgo = (item: any) => {
  tab.gotoRoute({
    title: item.menuName,
    route: item.menuPath,
  });
  quickvisible.value = false;
};

const gosetting = () => {
  router.push("/internal/userSetting");
};

const isquick = ref(false);

const Avatarvisible = ref(false);

const currentGroupName = computed(() => {
  const res = findParentRouteByPath(mainMenu.menuTree, route.path);
  if (res == null) {
    return "工作中心";
  }
  let str = "";
  mainMenu.menuTree.forEach((item) => {
    let arr = item.children.map((i) => {
      return i.meta.title;
    });
    if (arr.includes(res.meta.title)) {
      str = item.meta.title;
    }
  });
  return str;
});
const findParentRouteByPath = (routes: MenuTree, path: string) => {
  let parentRoute = null;

  const findParentRoute = (routes, path, parent) => {
    for (let route of routes) {
      if (route.path === path) {
        parentRoute = parent;
        break;
      } else if (route.children) {
        findParentRoute(route.children, path, route);
      }
    }
  };

  findParentRoute(routes, path, null);

  return parentRoute;
};

const themeType = ref(1);


//hex颜色转rgb颜色
const HexToRgb = (str) => {
  // var r = /^\#?[0-9A-F]{6}$/;
  //test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false
  // if (!r.test(str)) return window.alert('输入错误的hex');
  //replace替换查找的到的字符串
  str = str.replace('#', '');
  //match得到查询数组
  var hxs = str.match(/../g);
  //alert('bf:'+hxs)
  for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
  //alert(parseInt(80, 16))
  //console.log(hxs);
  return hxs;
}
 
//GRB颜色转Hex颜色
const RgbToHex = (a, b, c) => {
  // var r = /^\d{1,3}$/;
  // if (!r.test(a) || !r.test(b) || !r.test(c))
  //   return window.alert('输入错误的rgb颜色值');
  var hexs = [a.toString(16), b.toString(16), c.toString(16)];
  for (var i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = '0' + hexs[i];
  return '#' + hexs.join('');
}
 
//得到hex颜色值为color的加深颜色值，level为加深的程度，限0-1之间
const getDarkColor = (color, level) => {
  // var r = /^\#?[0-9A-F]{6}$/;
  // if (!r.test(color)) return window.alert('输入错误的hex颜色值');
  var rgbc = HexToRgb(color);
  //floor 向下取整
  for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
  return RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
}
 
//得到hex颜色值为color的减淡颜色值，level为加深的程度，限0-1之间
const getLightColor = (color, level) => {
  // var r = /^\#?[0-9A-F]{6}$/;
  // if (!r.test(color)) return window.alert('输入错误的hex颜色值');
  var rgbc = HexToRgb(color);
  for (var i = 0; i < 3; i++)
    rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
  return RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
}


//执行
const setColor = (
  key: string,
  value: any,
  dom = document.documentElement
): void => {
  dom.style.setProperty(key, value);
};
const setThemeColor = (color: string, i: number): void => {
  themeType.value = i;
  setColor("--fms-header-color", color);
  if(i == 2){
    setColor("--fms-leftslider-bgcolor", '#555555');
    setColor("--fms-leftmenu-fontcolor", "rgba(255,255,255,0.85)");
    setColor('--fms-leftmenu-titlecolor', "#FFFFFF");
    setColor('--fms-leftmenu-active-bgcolor',color);
    setColor('--fms-leftmenu-fontcolor-active',"#FFFFFF");
  }else{
    setColor("--fms-leftslider-bgcolor", '#F2F3F4');
    setColor("--fms-leftmenu-fontcolor", "rgba(48, 49, 51,0.85)");
    setColor('--fms-leftmenu-titlecolor', "#3c4144");
    setColor('--fms-leftmenu-active-bgcolor', "#FFFFFF");
    setColor('--fms-leftmenu-fontcolor-active',color);
  }
};

watch(menuName, (newValue, oldValue) => {});

onMounted(async () => {
  await getQuickList();
  isquick.value = true;
  // 业务信息的字典数据和人员信息选择框的数据
  // businessBaseData()
  console.log(store, "store");

  store.dispatch("businessBaseData/getAllData");
});
</script>

<style lang="scss" scoped>
$header-height: 50px;
$slide-background: #f2f3f5;

.container {
  width: 100%;
  height: 100%;
  min-width: $screen-min-width;

  :deep(.el-overlay) {
    // z-index: 1950 !important;
  }
}

.header {
  width: 100%;
  height: $header-height;
  line-height: $header-height;
  display: flex;
  position: relative;
  // z-index: 2031;
  // box-shadow: 0 1px 3px 0 hsl(0deg 0% 42% / 15%);
  justify-content: space-between;
  background-color: var(--fms-header-color);
  color: #ffffff;
  padding: 0 8px 0 16px;

  // 头部左侧
  .left {
    display: flex;
    .logobox{
      width: 134px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .logo {
        height: 24px;
      }
    }
    

    .text {
      font-size: 14px;
    }

    .menu_icon {
      display: flex;
      width: 50px;
      height: 50px;
      background-color: #3388ff;
      color: #fff;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;

      img {
        width: 30px;
        margin: 0 auto;
      }
    }
  }

  // 头部右侧
  .right {
    display: flex;
    padding-right: 10px;

    .menu_hover {
      cursor: pointer;
    }

    .menu_item {
      font-size: 14px;
      padding: 0px 10px;
      line-height: 50px;
      cursor: pointer;
      color: rgba(255,255,255,0.85);
      &:hover{
        color: rgba(255,255,255,1);
      }
    }

    .menu_icon {
      font-size: 17px;
    }
  }
}

.header:after {
  content: " ";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #155BD4;
  z-index: 100;
}

:deep(.internal-menu-drawer-overlay) {
  // z-index: 2030 !important;
}

:deep(.menu-drawer) {
  &.el-drawer {
    top: 50px;
    overflow: hidden;
    height: calc(100% - 50px);
  }

  .menu-container {
    display: flex;
    height: 100%;

    .left-menu {
      width: 240px;

      .menu-items {
        font-size: 12px;
      }

      .menu-item {
        width: 100%;
        color: #333;
        line-height: 48px;
        padding: 0 18px;
        box-sizing: border-box;
        cursor: pointer;

        &:hover {
          background-color: #f2f2f2;
        }

        &.hoverd {
          background-color: #f2f2f2;
        }
      }

      .user-menu-item {
        position: relative;
        border-bottom: 1px solid #e2e2e2;

        .arrow {
          position: absolute;
          color: #dedede;
          right: 10px;
          font-size: 16px;
          top: 16px;
        }
      }
    }

    .right-menu {
      min-width: 441px;
      padding-top: 32px;
      padding-left: 32px;
      padding-bottom: 7px;
      flex: 1;
      display: flex;
      box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
      background-color: #f7f7f7;
      height: 100%;
      position: relative;

      .close-drawer {
        position: absolute;
        right: 10px;
        top: 20px;
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
}

.main-content {
  display: flex;
  // $header-height
  height: calc(100% - 50px);

  .toggle_left {
    position: absolute;
    top: 40%;
    cursor: pointer;
    right: -2px;
    z-index: 9;
  }

  .toggle_change {
    display: none;
  }

  :deep(.children-menu) {
    position: relative;
    min-width: 180px;
    width: 180px;
    height: 100%;
    background-color: #f2f3f5;
    transition: min-width 0.3s ease-out, width 0.3s ease-out;
    border-right: 1px solid #e4e7ed;
    overflow-x: hidden;

    &.menu_change {
      width: 0;
      min-width: 0;
      transition: min-width 0.3s ease-out, width 0.3s ease-out;
    }

    .menu-title {
      color: #3c4144;
      margin-left: 20px;
      font-size: 14px;
      height: 56px;
      line-height: 56px;
      font-weight: 700;
    }

    .el-menu {
      background-color: #f5f5f5;
    }

    .el-menu-instance:hover {
      color: #409eff;
      background: #f5f5f5;
    }

    .el-menu-instance.is-active {
      // color: #303133;
      background-color: #eaeaea;
    }

    .el-submenu__title:hover {
      background-color: rgb(204, 204, 204);
    }

    // .el-menu-instance:hover {
    //   background-color: rgb(204, 204, 204);
    // }
    .el-sub-menu .el-menu-item {
      padding: 0px;
      min-width: auto;
    }
  }

  .toggle_right {
    position: absolute;
    top: 43%;
    cursor: pointer;
    z-index: 9;
  }

  .router-view {
    overflow: auto;
    // height: 100%;
    width: 100%;
    flex: 1;
    background: #f8f8f8;

    :deep(.el-tabs--card > .el-tabs__header) {
      margin-bottom: 0;
      border: none;
    }
  }

  .router-view-content {
    flex: 1;
    overflow: auto;
    height: calc(100% - 32px);
    width: 100%;

    :deep(.el-overlay) {
      // z-index: 2103 !important;
    }
  }
}

.full-menu-items {
  display: flex;
  flex: 1;
  /* height: calc(100% - 50px); */
  height: 100vh;
  flex-wrap: wrap;
  max-width: 800px;
  overflow-y: auto;
}

:deep(.full-menu-item) {
  width: 220px;

  .full-menu-item-title {
    color: #333;
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 8px;
    margin-left: 23px;
  }

  .el-tree {
    background-color: #f7f7f7;
  }

  .el-tree-node__label {
    font-size: 12px;
    color: #555;
  }

  .el-tree-node__content:hover {
    background-color: #eaeaea;
  }
}

:deep(.el-menu-vertical-demo) {
  &.el-menu {
    border-right: 0px;
  }
  

  .el-menu-item {
    height: 40px;
    line-height: 40px;
    opacity: 0.85;
    color: var(--fms-leftmenu-fontcolor);
    background-color: var(--fms-leftslider-bgcolor);

    &:hover {
      opacity: 1;
      background-color: var(--fms-leftmenu-active-bgcolor);
      color: var(--fms-leftmenu-fontcolor-active);
    }

    &.is-active {
      opacity: 1;
      border-radius: 2px;
      background-color: var(--fms-leftmenu-active-bgcolor);
      color: var(--fms-leftmenu-fontcolor-active);
    }
  }

  .el-sub-menu {
    .el-sub-menu__title {
      height: 40px;
      line-height: 40px;

      &:hover {
        opacity: 1;
        background-color: #f7f8fa;
        color: #409eff;
      }
    }

    opacity: 0.85;
    background-color: #f2f3f5;

    &.is-opened {
      opacity: 1;
    }
  }
}

.menu_dropdown {
  width: 130px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);

  :deep(.el-dropdown-menu__item) {
    padding: 0px 32px !important;
    padding-left: 12px !important;
    font-size: 12px;
    line-height: 28px;
  }

  :deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
    background-color: #eff4ff;
    color: #5e95ff;
  }
}

:deep(.el-tabs--card>.el-tabs__header){
  height: auto;
}

// 自定义标签栏
.outer-tab {
  width: 100%;
  height: 32px;
  background-color: white;
  overflow: hidden;
  border-bottom: 1px solid #DCDCDC;
  box-sizing: border-box;
  padding-top: 3px;

  :deep(.el-tabs__item, .el-tabs__item:last-child) {
    height: 24px;
    line-height: 24px;
    // width:85px;
    padding: 0 16px !important;
    text-align: center !important;
    border: none;
  }

  :deep(.el-tabs__item) {
    .el-icon {
      position: relative;
      font-size: 12px;
      width: 0;
      height: 14px;
      vertical-align: middle;
      line-height: 15px;
      overflow: hidden;
      top: -1px;
      right: -2px;
      transform-origin: 100% 50%;
      border-radius: 50%;
      text-align: center;
      transition: all var(--el-transition-duration)
        cubic-bezier(0.645, 0.045, 0.355, 1);
      margin-left: 5px;
      padding-top: 1px;

      &:hover {
        color: #ffffff;
      }
    }

    &:hover {
      .el-icon {
        width: 14px !important;
      }
    }

    .el-icon:hover {
      background-color: #39f;
    }

    .tab-dragable-item{
      font-size: 12px;
      line-height: 24px;
    }
  }

  :deep(.el-tabs__nav) {
    border: none;
  }

  :deep(.is-active) {
    background: #f8f8f8;
    padding-left: 8px !important;
    padding-right: 8px !important;

    .el-icon {
      width: 14px !important;
    }
    .tab-dragable-item{
      color: var(--el-color-primary);
    }
  }

  :deep(.el-tabs__nav-scroll) {
    padding: 0 17px;
  }

  :deep(.el-tabs__nav-next) {
    line-height: 30px;
  }

  :deep(.el-tabs__nav-prev) {
    line-height: 30px;
  }

  :deep(.el-icon-close) {
    width: 14px !important;
  }
}

.tab-bar {
  :deep(.el-tabs__nav-scroll) {
    padding-left: 15px;
  }
}

.el-dropdown-link {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  background: #5e95ff;
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #ffffff;
  text-align: center;
  font-size: 13px;
}

.menu_aliem {
  display: flex;
  align-items: center;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 150px;
  box-sizing: border-box;
  padding: 0 8px;
  background-color: var(--fms-leftslider-bgcolor);
}

.sidebar__collapse {
  width: 100%;
  height: 40px;
  min-height: 40px;

  -webkit-box-pack: center;

  -webkit-box-align: center;
  transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
    margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  color: #7f7f7f;

  // border-bottom: 1px solid #EBEDF0;
  cursor: pointer;
  font-size: 20px;
  box-sizing: border-box;
  position: relative;

  .menuTitle {
    color: var(--fms-leftmenu-titlecolor);
    font-size: 15px;
    font-weight: 700;
    line-height: 40px;
    margin-left: 25px;
  }

  .el-icon {
    right: 20px;
    top: 11px;
    position: absolute;
  }
}

.sidebarMail {
  background-color: var(--fms-leftslider-bgcolor);
  border-right: 1px solid #DCDCDC;
}

.sidebarCollapse {
  :deep(.menutype1) {
    display: none;
  }
}

.borderline {
  width: 1px;
  height: 16px;
  background: #abcffe;
}

.menuBox {
  height: 100%;
  display: flex;
  align-items: center;

  .menuTreeItem {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 500;
    line-height: 50px;
    padding: 0 12px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover{
      color: rgba(255,255,255,1);
    }
  }
  .menuTreeItemActive {
    background-color: rgba(0,0,0, 0.1);
    color: rgba(255,255,255,1);
  }
}
.menuChildrenContainer {
  -webkit-column-count: 2;
  column-count: 2;
  padding: 12px;
  .menuChildrenColumn {
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    list-style-type: none;
    .menuGroupTitle {
      color: rgba(0,0,0,0.85);
      font-weight: bold;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: left;
      padding: 5px 8px;
      line-height: 1.5;
    }
    .menuGroupBox {
      display: flex;
      flex-wrap: wrap;
      column-count: 2;
      justify-content: space-between;
      .menuGroupItem {
        width: 106px;
        padding: 6px 8px;
        color: rgba(0,0,0,0.6);
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: left;

        position: relative;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        font-size: 12px;
        img {
          width: 14px;
          position: absolute;
          right: 4px;
          top: 10px;
          display: none;
        }
        &:hover {
          color: var(--el-color-primary);
          background: var(--el-color-primary-light-9);
          img {
            display: block;
          }
        }
      }
    }
  }
}
.quicktitle {
  width: 100%;
  height: 35px;
  padding: 8px 16px;
  color: rgba(0, 0, 0, 0.65);
  box-sizing: border-box;
  border-bottom: 1px solid #e9e9e9;
  font-weight: 500;
}
.quickBox {
  padding: 8px 16px;
  color: rgba(0, 0, 0, 0.65);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .quickItem {
    cursor: pointer;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    i {
      margin-left: 4px;
      color: #f56c6c;
      display: none;
    }
    &:hover {
      color: #108ee9;
      i {
        color: #f56c6c;
        display: block;
      }
    }
  }
}
.accountBox {
  position: relative;
  border: 0px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: -24px;
  padding-right: 8px;
  .accountMess {
    height: 100%;
    margin-right: 10px;
    .accountname {
      padding-top: 7px;
      max-width: 100px;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
      color: #ffffff;
      font-size: 12px;
    }
    .accountsubname {
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
      color: #ffffff;
      font-size: 0.75em;
      line-height: 16px;
    }
  }
}
.noquick {
  width: 100%;
  text-align: center;
}

.AvatarBox {
  .AvatarBoxTop {
    padding: 12px;
    background: #f4f6f7;
    .account {
      line-height: 20px;
      color: #333333;
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .nickname {
      margin: 4px 0;
      .nicklabel {
        color: #999999;
        line-height: 18px;
        margin-right: 8px;
        font-size: 12px;
      }
      .nickvalue {
        color: #333333;
        line-height: 18px;
        font-size: 12px;
      }
    }
    .AvatarBtn {
      width: 52px;
      height: 20px;
      background: #ffffff;
      margin-top: 4px;
      padding: 0 8px;
      box-sizing: border-box;
      border: 1px solid #0064c8;
      border-radius: 100px;
      color: #0064c8;
      font-size: 0.8em;
      line-height: 18px;
      cursor: default;
    }
  }
  .AvatarMiddle {
    widows: 100%;
    height: 32px;
    border: 1px solid #ebebeb;
    border-left: none;
    border-right: none;
    display: flex;
    .AvatarMiddleItem {
      flex: 1;
      box-sizing: border-box;
      padding: 0 12px;
      color: #666666;
      font-size: 12px;
      line-height: 32px;
      text-align: center;
      &:hover {
        background: rgba(0, 45, 70, 0.043);
      }
      &:first-child {
        border-right: 1px solid #ebebeb;
      }
    }
  }
  .AvatarBottom {
    height: 56px;
    box-sizing: border-box;
    padding: 12px 6px;
    .quitbtn {
      width: 294px;
      height: 32px;
      border: 1px solid #e3e4e6;
      border-radius: 2px;
      color: #666666;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;
      margin: auto;
      cursor: default;
      &:hover {
        background: #f4f6f7;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
      }
    }
  }
}
.themeicon {
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 15px;
}
:deep(.themeClass) {
  .el-drawer__header {
    margin-bottom: 0;
    padding-top: 0;
    height: 50px;
    box-sizing: border-box;
    border-bottom: 1px solid #cdd0d6;
    color: #000000;
    font-size: 13px;
  }
}
.themebox {
  width: 100%;
  .themeItemMain {
    display: flex;
    justify-content: center;
  }
  .themeItem {
    width: 80px;
    height: 50px;
    background: #ffffff;
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;
    .menban {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      top: 0;
      left: 0;
      display: none;
      justify-content: center;
      align-items: center;
    }
    .themeTop {
      width: 100%;
      height: 10px;
    }
    .themeBottom {
      width: 100%;
      height: 40px;
      display: flex;
      .themeBottomL {
        width: 12px;
        height: 100%;
        box-sizing: border-box;
        border-right: 1px solid #e4e7ed;
        background: #f2f3f5;
      }
      .themeBottomR {
        flex: 1;
        background: #f8f8f8;
      }
    }
  }
  .themeItemActive {
    .menban {
      display: flex;
    }
  }
}
</style>
<style lang="scss">
.menuTreePopper {
  padding: 0 !important;
  .el-popper__arrow {
    display: none;
  }
}
</style>
